<template>
    <div class="wallet-content">
        <div class="wallet-title">波点钱包</div>
        <div style="height: calc(100% - 2rem);overflow-y: scroll">
            <div class="wallet-page-head-banner">
                <div class="logo"></div>
                <div class="banner">
                    <div class="logo-word"></div>
                    <div class="banner-title">大家都在用的安全钱包</div>
                </div>
            </div>
            <div class="notice">
                <div class="notice-content">
                    <div class="notice-icon"></div>
                    <ul>
                        <li class="notice-message">即日起推荐他人定存开始享受三级提成奖励</li>
                        <li class="notice-message" style="display: none">即日起，一周无业绩，锁仓币扣50%，两周清空</li>
                        <li class="notice-message" style="display: none">即日起，每天进行持仓快照，新增业绩每日释放！</li>
                        <li class="notice-message" style="display: none">接各大交易所通知，每次充提币请勿少于50trx</li>
                        <li class="notice-message" style="display: none">即日起，恢复一推五释放标准</li>
                        <li class="notice-message" style="display: none">增加888锁仓币今日开始释放</li>
                        <li class="notice-message" style="display: none">今日上线18%推荐奖励，t+1到账</li>
                    </ul>
                </div>
            </div>
            <div class="coin-list" v-show="display">
                <div class="list-head">
                    <span class="coin-name">币种</span>
                    <span class="head-item">可用</span>
                    <span class="head-item">锁仓</span>
                    <span class="head-item">可释放</span>
                    <span class="head-item-opr">操作</span>
                </div>
                <div class="list-body" >

                    <!--<Currency v-for="(item,index) in list" :currency_img="item.currency_img" :currency_name="item.currency_name"-->
                             <!--:number="item.number" :freeze_number="item.freeze_number" :id="item.id" :key="index" ></Currency>-->


                    <div  v-for="(item,index) in list">
                        <div class="list-item">
                            <div class="coin-logo">
                                <div class="icon icon-trx"></div>
                            </div>
                            <div class="coin-info td-item">
                                <span class="coin-name">{{item.currency_name}}</span>
                                <!--<span class="coin-price">￥0.178</span>-->
                            </div>
                            <div class="red-font td-item">
                                <span>{{item.number}}</span>
                                <!--<p class="coin-price coin-money">￥0</p>-->
                            </div>
                            <div class="gray-font td-item">
                                <span>{{item.freeze_number}}</span>
                                <!--<p class="coin-price coin-money">￥158.1</p>-->
                            </div>
                            <div class="gray-font td-item">
                                <span>0</span>
                                <!--&lt;!&ndash;<p class="coin-price coin-money">￥0</p>&ndash;&gt;-->
                            </div>
                            <div class="opr td-item "  >
                                <span class="icon-more more-up" v-if="showTRX==item.id" @click="changeTRX(item.id)"></span>
                                <span class="icon-more more-down"   v-else @click="changeTRX(item.id)" ></span>
                            </div>
                        </div>
                        <div class="opr-list" v-if="showTRX==item.id" >
                            <span class="opr-btn fix_w" v-if="item.number >0">刷新余额</span>
                            <span class="opr-btn" @click="showWithdraws(item.id) " >提现</span>
                            <span class="opr-btn" @click="showRecharges(item.id) ">充值</span>
                            <span class="opr-btn" @click="changeRoute(item.id)" v-if="item.number >0">定存</span>
                        </div>
                    </div>





                </div>
                <div class="dialog van-popup" v-if="showRecharge">
                    <div class="close" @click="showRecharge = false"></div>
                    <h2 class="title">充值操作</h2>
                    <h3 class="dlg-title">您正在进行TRX充值操作</h3>
                    <div class="demo-ruleForm wrap">
                        <div class="item-title">TRX钱包地址：</div>
                        <div class="address">TNpDfGdo4xLKQRcQKAD2r6iRJEG8zUw6hU</div>
                        <div>
                            <span class="link-btn">复制</span>
                        </div>
                        <div class="btn-line">
                            <button class="btn" @click="showRecharge = false">确定</button>
                        </div>
                    </div>
                </div>
                <div class="dialog out-pwd-dialog van-popup" v-if="showWithdraw">
                    <div class="close" @click="showWithdraw = false"></div>
                    <h2 class="title">交易密码</h2>
                    <div class="demo-ruleForm wrap">
                        <label>
                            <div class="labelTit">交易密码：</div>
                            <input type="password" placeholder="请输入交易密码">
                            <span class="error-tip" style="display: none">8-16位，必须包含数字和字母。</span>
                        </label>
                        <label>
                            <div class="labelTit">验证码：</div>
                            <input maxlength="6" placeholder="请输入验证码" class="authCode">
                            <button class="authBtn">获取验证码</button>
                            <span class="error-tip" style="display: none">验证码格式错误。</span>
                        </label>
                        <div class="input-tip">
                            <span class="link-span">设置密码</span>
                        </div>
                        <div class="btn-line">
                            <button class="btn" @click="showWithdraw = false, showOperate = true">确定</button>
                        </div>
                    </div>
                </div>
                <div class="dialog width-draw-cash-dialog van-popup dialog-operate" v-if="showOperate">
                    <div class="close" @click="showOperate = false"></div>
                    <h2 class="title">提现操作</h2>
                    <h3 class="dlg-title">您正在进行TRX提现操作</h3>
                    <div class="balance-tip">
                        最多可提现
                        <span>
                            <span>0</span>
                            <span class="unit"> TRX</span>
                        </span>
                    </div>
                    <div class="demo-ruleForm wrap">
                        <label>
                            <div class="labelTit">提现金额：</div>
                            <input placeholder="最多提现：0">
                            <span class="input-unit">TRX</span>
                            <span class="suffix-btn">全部提现</span>
                            <span class="error-tip" style="display: none">请输入0-0之间的提现金额。</span>
                        </label>
                        <label>
                            <div class="labelTit">钱包地址：</div>
                            <input placeholder="请输入钱包地址">
                            <span class="error-tip" style="display: none">请输入0-0之间的提现金额。</span>
                        </label>
                        <div class="tip">注：提现时平台将收取千分之三作为手续费</div>
                        <div class="btn-line">
                            <button class="btn" @click="showOperate = false">确认提现</button>
                        </div>
                    </div>
                </div>
                <div class="van-overlay" v-if="showRecharge | showWithdraw | showOperate"></div>
            </div>
            <myLoading v-show="!display"></myLoading>
            <Toast :msg="msg" v-if="this.msg!==''" :class="opacity" @toast="square"></Toast>
        </div>
        <NavComponent></NavComponent>
    </div>
</template>

<script>
    import $ from 'jquery';
    import {site,key} from '../../assets/js/site.js'
    import sha1 from 'sha1';
    import Toast from '../../element/toast'
    // import Currency from '../../element/currency'
    import MyLoading from '../../element/myLoading'
    export default {
        name: 'wallet',
        components: {Toast,MyLoading},
        data() {
            return{
                showTRX: '',
                status:1,
                showRecharge: false,
                showWithdraw: false,
                showOperate: false,
                finance:{currency_img: '',currency_img: '',number: '',freeze_number:'',id: ''},
                list: [],
                display: '',
                msg:''
            }
        },
        computed: {
            opacity () {
                return {
                    opacity: this.msg != '',
                }
            }
        },
        mounted() {
            var th = this;
            var info = {
                uid: localStorage.getItem('uid'),
                token: sha1(localStorage.getItem('uid') +key)
            };
            $.ajax({
                type: "POST",
                url: "http://" + site + "/index/Wallet/getCurrency",
                data: info,
                dataType: "json",
                complete: function (xhr, status) {
                },
                success: function (data, status) {
                    th.display =  true
                    if (status == "success") {
                        if(data.code =='1'){
                           th.list = data.data
                        }else{
                            th.msg = data.msg;
                        }
                    } else {
                        th.msg = data.msg;
                    }
                },
                error(status, error) {
                    if (error) {
                        th.msg = '系统错误';
                    }
                }
            })
        },
        methods: {
            square (v) {
                this.msg = v
            },
            changeTRX(id) {
                if(status==1){
                    status =2
                    this.showTRX = id;
                }else{
                    status =1
                    this.showTRX = '';
                }
            },
            changeRoute(id){
                this.$router.push({path:"/deposit?path=currency&id="+id});
            },
            showWithdraws(id){
               this.showWithdraw = true
            },
        }
    }
</script>

<style lang="scss">
    .wallet-content{
        width: 100%;
        height: 100%;
        .wallet-title{
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            font-size: 0.34rem;
            border-bottom: 0.02rem solid #ccc;
        }
        .wallet-page-head-banner{
            padding: 0.3rem 0.16rem 0.01rem;
            .logo{
                width: 1.25rem;
                height: 0.4rem;
                margin-bottom: 0.14rem;
                margin-left: 0.14rem;
                background: url(../../assets/img/logo.png) no-repeat;
                background-size: contain;
            }
            .banner{
                width: 100%;
                height: 3.76rem;
                padding: 1.04rem 0.56rem;
                box-sizing: border-box;
                background: url(../../assets/img/title.png) no-repeat;
                background-size: contain;
                .logo-word{
                    width: 2.9rem;
                    height: 0.8rem;
                    background: url(../../assets/img/logo-white.png) no-repeat;
                    background-size: contain;
                }
                .banner-title{
                    font-family: PingFangSC-Medium,serif;
                    font-size: 0.36rem;
                    color: #fff;
                    letter-spacing: 0.05rem;
                    margin-top: 0.08rem;
                }
            }
        }
        .notice{
            width: 100%;
            height: 0.5rem;
            line-height: 0.5rem;
            font-size: 0.24rem;
            color: #666;
            background: #fdf8ef;
            padding: 0 0.3rem;
            .notice-content{
                position: relative;
                overflow: hidden;
                height: 100%;
                display: flex;
                .notice-icon{
                    display: inline-block;
                    width: 0.28rem;
                    height: 0.26rem;
                    -webkit-transform: translateY(6px);
                    margin-right: 0.1rem;
                    background: url(../../assets/img/news.jpg) no-repeat;
                    background-size: contain;
                    opacity: 0.8;
                    vertical-align: middle;
                }
                ul{
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    position: relative;
                    list-style: none;
                    .notice-message{
                        display: flex;
                        width: 100%;
                        height: 100%;
                        position: absolute;
                    }
                }
            }
        }
        .coin-list{
            .list-head{
                width: 100%;
                font-family: PingFangSC-Medium,serif;
                font-size: 0.28rem;
                color: #333;
                letter-spacing: 0;
                line-height: 0.28rem;
                border-bottom: 0.02rem solid #e9e9e9;
                display: flex;
                .coin-name{
                    width: 1.9rem;
                    height: 0.8rem;
                    line-height: 0.8rem;
                    padding: 0 0.1rem 0 0.3rem;
                    display: inline-block;
                    text-align: left;
                }
                .head-item{
                    height: 0.8rem;
                    line-height: 0.8rem;
                    display: inline-block;
                    text-align: center;
                    flex: 1;
                    padding: 0 0.1rem;
                }
                .head-item-opr{
                    width: 0.8rem;
                    padding: 0 0.16rem 0 0;
                    height: 0.8rem;
                    line-height: 0.8rem;
                    display: inline-block;
                    text-align: center;
                }
            }
            .list-body{
                .list-item{
                    height: 1.4rem;
                    display: flex;
                    .coin-logo{
                        width: 0.86rem;
                        padding-top: 0.35rem;
                        .icon{
                            display: inline-block;
                            width: 0.64rem;
                            height: 0.64rem;
                            border-radius: 0.72rem;
                            margin: 0 0.14rem 0 0.02rem;
                            transform: translate(6px);
                            vertical-align: top;
                        }
                        .icon-btt{
                            background: url(../../assets/img/1.png) no-repeat;
                            background-size: contain;
                        }
                        .icon-att{
                            background: url(../../assets/img/2.jpeg) no-repeat;
                            background-size: contain;
                        }
                        .icon-trx{
                            background: url(../../assets/img/3.jpg) no-repeat;
                            background-size: contain;
                        }
                        .icon-eth{
                            background: url(../../assets/img/4.jpg) no-repeat;
                            background-size: contain;
                        }
                        .icon-btc{
                            background: url(../../assets/img/5.jpg) no-repeat;
                            background-size: contain;
                        }
                        .icon-usdt{
                            background: url(../../assets/img/6.jpg) no-repeat;
                            background-size: contain;
                        }
                    }
                    .coin-info{
                        width: 1.04rem;
                        display: inline-block;
                        text-align: left;
                        position: relative;
                        padding: 0.2rem 0;
                        border-bottom: 0.02rem solid #e9e9e9;
                        .coin-name{
                            font-family: PingFangSC-Semibold,serif;
                            font-weight: 700;
                            font-size: 0.24rem;
                            color: #333;
                            letter-spacing: 0;
                            text-align: center;
                            line-height: 0.32rem;
                            position: absolute;
                            top: 0.4rem;
                        }
                        .coin-price{
                            font-family: PingFangSC-Regular,serif;
                            font-size: 0.24rem;
                            color: #999;
                            letter-spacing: 0;
                            line-height: 0.24rem;
                            position: absolute;
                            top: 0.8rem;
                        }
                    }
                    .red-font,.gray-font{
                        font-family: PingFangSC-Medium,serif;
                        font-size: 0.24rem;
                        letter-spacing: 0;
                        text-align: center;
                        line-height: 0.72rem;
                        display: inline-block;
                        -webkit-box-flex: 1;
                        flex: 1;
                        position: relative;
                        padding: 0.2rem 0;
                        border-bottom: 0.02rem solid #e9e9e9;
                        .coin-price{
                            font-family: PingFangSC-Regular,serif;
                            font-size: 0.24rem;
                            color: #999;
                            letter-spacing: 0;
                            line-height: 0.24rem;
                            position: absolute;
                            top: 0.8rem;
                            width: 100%;
                            text-align: center;
                        }
                    }
                    .red-font{
                        color: #f6234d;
                        font-size: 16px;
                    }
                    .gray-font{
                        color: #666;
                        font-size: 16px;
                    }
                    .opr{
                        text-align: right;
                        vertical-align: middle;
                        display: inline-block;
                        line-height: 0.88rem;
                        width: 0.8rem;
                        position: relative;
                        padding: 0.2rem 0.3rem 0.2rem 0;
                        border-bottom: 0.02rem solid #e9e9e9;
                        .more-down{
                            width: 0.32rem;
                            height: 0.32rem;
                            display: inline-block;
                            margin-top: 0.34rem;
                            background: url(../../assets/img/open.png) no-repeat;
                            background-size: contain;
                            vertical-align: top;
                        }
                        .more-up{
                            width: 0.32rem;
                            height: 0.32rem;
                            display: inline-block;
                            margin-top: 0.34rem;
                            background: url(../../assets/img/close.png) no-repeat;
                            background-size: contain;
                            vertical-align: top;
                        }
                    }
                }
                .opr-list{
                    width: 100%;
                    text-align: right;
                    height: 0.8rem;
                    padding: 0.16rem 0;
                    transition: height .3s ease-in-out;
                    border-bottom: 0.02rem solid #e9e9e9;
                    .opr-btn{
                        display: inline-block;
                        width: 1rem;
                        height: 0.48rem;
                        background: #e60816;
                        border-radius: 0.24rem;
                        font-family: PingFangSC-Medium,serif;
                        font-size: 0.24rem;
                        color: #fff;
                        letter-spacing: 0;
                        line-height: 0.48rem;
                        text-align: center;
                        margin-right: 0.3rem;
                        vertical-align: top;
                    }
                    .fix_w{
                        width: 1.2rem;
                    }
                }
            }
            .van-overlay{
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,.7);
                z-index: 2001;
            }
            .van-popup{
                position: fixed;
                top: 50%;
                left: 50%;
                max-height: 100%;
                transition: 0.3s ease-out;
                transform: translate3d(-50%,-50%,0);
            }
            .dialog{
                z-index: 2030;
                text-align: center;
                width: 80%;
                background-color: #fff;
                border-radius: 0.1rem;
                min-height: 3rem;
                overflow: auto;
                padding: 0.3rem 0.5rem 0.48rem;
                .close{
                    position: absolute;
                    width: 0.32rem;
                    height: 0.32rem;
                    background: url(../../assets/img/guanbi.png) 0 0 no-repeat;
                    background-size: 100%;
                    top: 0.24rem;
                    right: 0.24rem;
                }
                .title{
                    font-size: 0.4rem;
                    color: #1d1d1d;
                    font-weight: 400;
                }
                .dlg-title{
                    font-size: 0.32rem;
                    color: #1d1d1d;
                    padding: 0.16rem 0.1rem 0.3rem;
                    text-align: center;
                    font-family: PingFangSC-Regular,serif;
                }
                .demo-ruleForm{
                    font-size: 0.24rem;
                    text-align: center;
                    label{
                        display: block;
                        position: relative;
                        .labelTit{
                            font-size: 0.28rem;
                            color: #4a4a4a;
                            line-height: 0.5rem;
                            margin-top: 0.3rem;
                            text-align: left;
                        }
                        input{
                            width: 5rem;
                            height: 0.7rem;
                            background-color: #fff;
                            border: 1px solid #e7e7e7;
                            border-radius: 0.08rem;
                            box-shadow: 0 2px 4px 0 hsla(0,0%,74%,.5);
                            padding-left: 0.2rem;
                            -webkit-appearance: none;
                        }
                        .authBtn{
                            display: block;
                            position: absolute;
                            line-height: 0.7rem;
                            width: 1.7rem;
                            overflow: visible;
                            right: 0;
                            bottom: 0;
                            background: none;
                            border: none;
                            color: #e60816;
                        }
                        .authBtn:before{
                            display: inline-block;
                            width: 0;
                            height: 0.25rem;
                            content: "";
                            border-left: 1px solid #e7e7e7;
                            position: absolute;
                            left: 0;
                            top: 0.22rem;
                        }
                        .error-tip{
                            position: absolute;
                            color: #e22828;
                            font-size: 0.24rem;
                            margin-top: 0.02rem;
                            left: 0;
                            top: 60px;
                        }
                    }
                    .input-tip{
                        color: #e60816;
                        line-height: 0.24rem;
                        margin-bottom: -0.1rem;
                        padding: 0.16rem 0.26rem 0;
                        width: 100%;
                        text-align: right;
                        right: 0;
                    }
                    .item-title{
                        color: #1d1d1d;
                    }
                    .address{
                        color: #a9a9a9;
                        overflow-wrap: break-word;
                        word-wrap: break-word;
                        user-select: text;
                    }
                    .link-btn{
                        color: #2ab3ce;
                    }
                    .btn-line{
                        text-align: center;
                        margin-top: 0.6rem;
                        .btn{
                            background-color: #e60816;
                            height: 0.6rem;
                            line-height: 0.6rem;
                            border-radius: 0.5rem;
                            border: none;
                            padding: 0;
                            width: 2.4rem;
                            user-select: none;
                            color: #fff;
                            font-size: 0.26rem;
                        }
                    }
                }
            }
        }
    }
    .dialog-operate{
        width: 90%!important;
        .dlg-title{
            padding: 0.1rem!important;
        }
        .balance-tip{
            width: 100%;
            background: #eef5fe;
            border-radius: 0.04rem;
            font-size: 0.26rem;
            color: #4a4a4a;
            height: 0.46rem;
            line-height: 0.46rem;
            text-align: left;
            padding: 0 0.12rem;
            margin: 0.2rem 0.5rem 0 0;
        }
        label{
            position: relative;
            input{
                width: 100%!important;
            }
            .input-unit{
                font-size: 0.24rem;
                color: #1d1d1d;
                position: absolute;
                left: 3.5rem;
                top: 0.7rem;
            }
            .suffix-btn{
                display: inline-block;
                position: absolute;
                font-size: 0.24rem;
                color: #2ab3ce;
                top: 0.68rem;
                right: 0.1rem;
                padding: 0.06rem;
                height: 0.25rem;
                line-height: 0.25rem;
                border-left: 1px solid #e7e7e7;
                cursor: pointer;
            }
        }
        .tip{
            margin-top: 0.4rem;
            margin-bottom: -0.1rem;
            color: #777;
            font-size: 13px;
            text-align: left;
        }

    }
</style>
